<template>
  <div class="drive-box">
    <div
      @mousedown="clickmouse"
      @mousemove="move"
      @mouseup="mouseup"
      id="d1"
    ></div>
    <div
      @mousedown="clickmouse"
      @mousemove="move"
      @mouseup="mouseup"
      id="d2"
    ></div>
    <div
      @mousedown="clickmouse"
      @mousemove="move"
      @mouseup="mouseup"
      id="d3"
    ></div>
    <input type="text" id="t1" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      isdown: false, // 判断鼠标是否被按下
    };
  },
  methods: {
    clickmouse() {
      this.isdown = true; //鼠标被按下
    },
    mouseup() {
      this.isdown = false; //鼠标松开
    },
    move(e) {
      const t1 = document.getElementById('t1');
      const d = e.target;
      const x = e.clientX; //事件被触发时，鼠标指针的水平坐标。
      const y = e.clientY; //事件被触发时，鼠标指针的垂直坐标。
      if (this.isdown) {
        t1.value = x + ',' + y;
        d.style.left = x - 100 + 'px'; //让鼠标显示在div块的中间，减去1/2的div块的宽度
        d.style.top = y - 100 + 'px'; //让鼠标显示在div块的中间，减去1/2的div块的高度
      }
    },
  },
};
</script>

<style lang="less" scoped>
.drive-box > div {
  height: 200px;
  width: 200px;
  background-color: red;
  position: absolute;
  top: 20px;
}
#d2 {
  top: 240px;
  background-color: aqua;
}
#d3 {
  top: 460px;
  background-color: blueviolet;
}
</style>
